<template>
  <div class="dashboard">


    <div class="controls">
      <button class="sort-button" @click="sortByTime">按时间排序</button>
      <button class="sort-button" @click="sortByType">按类型排序</button>
    </div>

    <div class="cards">
      <div
        v-for="flow in sortedFlows"
        :key="flow.ip + flow.time"
        :class="['card', cardClass(flow.flowType)]"
      >
        <div class="card-header">
          <span class="type">{{ flow.flowType }}</span>
          <span class="time">{{ formatTime(flow.time) }}</span>
        </div>
        <div class="card-content">
          <p><strong>IP：</strong>{{ flow.ip }}</p>
          <p><strong>协议：</strong>{{ flow.protocol }}</p>
          <p><strong>流持续时间：</strong>{{ flow.flowDuration }} us</p>
          <p><strong>正向包数：</strong>{{ flow.fwdPackets }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { GetAllDDoSFlows, type DDoSFlow } from '@/api/ddos'

const flows = ref<DDoSFlow[]>([])
const sortKey = ref<'type' | 'time'>('time')

const sortedFlows = computed(() => {
  return [...flows.value].sort((a, b) => {
    if (sortKey.value === 'type') {
      return flowTypeOrder(a.flowType) - flowTypeOrder(b.flowType)
    } else {
      return new Date(b.time).getTime() - new Date(a.time).getTime()
    }
  })
})

function flowTypeOrder(type: string): number {
  if (type.includes('攻击')) return 1
  if (type.includes('未知')) return 2
  return 3
}

function sortByType() {
  sortKey.value = 'type'
}
function sortByTime() {
  sortKey.value = 'time'
}

function formatTime(time: string) {
  return new Date(time).toLocaleString()
}

function cardClass(flowType: string) {
  if (flowType.includes('正常')) return 'card-normal'
  if (flowType.includes('未知')) return 'card-unknown'
  return 'card-attack'
}

onMounted(async () => {
  const res = await GetAllDDoSFlows()
  flows.value = res.data
})
</script>

<style scoped>
.dashboard {
  Width: 100%;
  margin: 0;
  padding: 32px 24px;
  background-color: #f0f4f8;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  font-family: 'Segoe UI', sans-serif;
  
}

.controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.card {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: #ffffff;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: bold;
}

.card-content p {
  margin: 6px 0;
}

.card-attack {
  background-color: #fee2e2;
  color: #b91c1c;
  font-weight: 600;
}

.card-unknown {
  background-color: #fef9c3;
  color: #92400e;
}

.card-normal {
  background-color: #e5e7eb;
  color: #1f2937;
}

.sort-button {
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s;
}

.sort-button:hover {
  background-color: #2563eb;
  transform: scale(1.05);
}

</style>
